import React, { Component } from 'react';
import { Table, Divider, Tag, Button, Modal } from 'antd';
import { _getQuestionsType, _insertQuestionsType ,_delQuestionsType} from '@/api/questionType';
class QuestionType extends Component {
  state = {
    list: [],
    visible: false,
    value: '',
    sort: '',
  };
  columns = [
    {
      title: '类型ID',
      dataIndex: 'questions_type_id',
    },
    {
      title: '类型名称',
      dataIndex: 'questions_type_text',
    },
    {
      title: '操作',
      dataIndex: 'questions_type_sort',
    },
  ];

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = async (e: any) => {
    // console.log(this.state.value);

    let res = await _insertQuestionsType({
      text: this.state.value,
        sort:  this.state.sort,
    });
    this.setState({
      visible: false,
    });
    this.init()
    
  };

  handleCancel = (e: any) => {
    // console.log(e);
    this.setState({
      visible: false,
    });
  };
  async init(){
    let res = await _getQuestionsType();
    // console.log(res);
    if (res.data.code == 1) {
      this.setState({
        list: res.data.data,
      });
    }
  }
  async componentDidMount() {
    // let res=await _delQuestionsType({id:'2'})
    // console.log(res);
    
      this.init()
  }
  handlchang = (e: any) => {
    // console.log(e.target.value);
    this.setState({
      value: e.target.value,
    });
  };
  handlsort = (e: any) => {
    // console.log(e.target.value);
    this.setState({
      sort: e.target.value,
    });
  };

  render() {
    return (
      <div>
        <Button type="primary" style={{margin:'10px 0'}} onClick={this.showModal}>
          +添加类型
        </Button>
        <Modal
          title="创建新类型"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <input
            type="text"
            placeholder="请输入类型名称"
            value={this.state.value}
            onChange={this.handlchang}
            style={{
              width: '100%',
              border: 'none',
              borderBottom: '1px solid #ccc',
              outline:'none'
            }}
          />
          <input
            type="text"
            placeholder="请输入序号"
            value={this.state.sort}
            onChange={this.handlsort}
            style={{
              width: '100%',
              border: 'none',
              borderBottom: '1px solid #ccc',
              outline:'none'
            }}
          />
        </Modal>
        <Table
          columns={this.columns}
          dataSource={this.state.list}
          rowKey="questions_type_id"
          size="middle"
        />
      </div>
    );
  }
}

export default QuestionType;
